﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setBundle basename="ApplicationMessage" />
<fmt:setLocale value="zh_CN" />

<!DOCTYPE html>
<html lang="zh-CN">

	<head>

		<%@ include file="/WEB-INF/include/meta.jsp"%>
		<%@ include file="/WEB-INF/include/css.jsp"%>

		<script>
			function showPhaseTbl(idx, total) {
				for(var i = 1; i <= total; i++) {
					if(i == idx) {
						document.getElementById("tbl-phase-" + i).style = "display:absolute";
						document.getElementById("currentPhase").value = idx + "";
						document.getElementById("currentPhaseId").value = document.getElementById("phaseId" + idx).value;
					} else {
						document.getElementById("tbl-phase-" + i).style = "display:none";
					}
				}
			}

			function doChangeActiveTab(obj) {
				$(obj).siblings('li').removeClass('active');
				$(obj).addClass("active");
			}

			function doPopSearch(type, param) {
				try {
					document.getElementById("closeBtn").click();
				} catch(e) {

				}
				if(type != null && type == "course") {
					document.getElementById("popSearchCourse").href = document.getElementById("popSearchCourseUrl").value + "?" + param;
					document.getElementById("popSearchCourse").click();
				} else {
					document.getElementById("popSearch").href = document.getElementById("popSearchUrl").value + "?" + param;
					document.getElementById("popSearch").click();
				}
			}
		</script>
	</head>

	<body>

		<%@ include file="/WEB-INF/include/header.jsp"%>
		<%@ include file="/WEB-INF/include/submenu.jsp"%>

		<div class="container-fluid umu-container has-umu-sidemenu">
			<div class="umu-breadcrumb">
				<div class="breadcrumb">学习项目详细信息</div>
			</div>
			<div class="panel-default beast-panel beast-panel-layout">

				<div class="panel-body">

					<div class="col-xs-12 beast-panel-layout-right">

						<div class="ms-content-layout">
							<div class="form-horizontal ms-form form-personal-info">

								<div class="form-group ms-form-group">
									<label class="control-label col-xs-2" style="width: 14%;">编号：</label>
									<div class="col-xs-2">
										<p class="form-control-static">${project.code}</p>
									</div>
									<label class="control-label col-xs-2" style="width: 14%;">分类：</label>
									<div class="col-xs-2" style="width: 26%;">
										<p class="form-control-static">${project.firstCategory.name} - ${project.secondCategory.name}</p>
									</div>
								</div>

								<div class="form-group ms-form-group">
									<label class="control-label col-xs-2" style="width: 14%;">项目名称：</label>
									<div class="col-xs-2">
										<div class="form-control-static" style="cursor: pointer;  white-space: nowrap; text-overflow: ellipsis; overflow:hidden;" data-toggle="tooltip" title="${project.name}">${project.name}</div>
									</div>
									<label class="control-label col-xs-2" style="width: 14%;">总期数：</label>
									<div class="col-xs-2">
										<p class="form-control-static">${project.phaseCount}</p>
									</div>
								</div>
								<div class="form-group ms-form-group">
									<label class="control-label col-xs-2" style="width: 14%;">项目负责人：</label>
									<div class="col-xs-2">
										<c:set var="projectLead" value="${persist.idmUser(project.projectLead)}"></c:set>
										<p class="form-control-static" title="${projectLead.usercn}（${projectLead.orgDepart}）">${projectLead.usercn}</p>
									</div>
									<label class="control-label col-xs-2" style="width: 14%;">事业部：</label>
									<div class="col-xs-2">
										<p class="form-control-static">${project.department.name}</p>
									</div>
								</div>
								<div class="form-group ms-form-group">
									<label class="control-label col-xs-2" style="width: 14%;">开始时间：</label>
									<div class="col-xs-2">
										<p class="form-control-static">
											<fmt:formatDate value="${project.beginDate}" pattern="yyyy-MM-dd" />
										</p>
									</div>
									<label class="control-label col-xs-2" style="width: 14%;">结束时间：</label>
									<div class="col-xs-2">
										<p class="form-control-static">
											<fmt:formatDate value="${project.endDate}" pattern="yyyy-MM-dd" />
										</p>
									</div>
								</div>

							</div>

							<div class="umu-main">
								<ul class="nav nav-pills umu-tabs">
									<c:forEach items="${projectPhases }" var="projectPhase" varStatus="status">
										<li class="pull-left <c:if test='${status.index==currentPhase-1 }'>active</c:if>" id="tab-phase${status.index+1 }" onClick="doChangeActiveTab(this);">
											<a href="javascript:showPhaseTbl(${status.index+1 },${project.phaseCount });">项目${status.index+1 }期</a>
										</li>
									</c:forEach>
								</ul>
								<input type="hidden" name="currentPhase" id="currentPhase" value="${currentPhase}" />
								<input type="hidden" name="currentPhaseId" id="currentPhaseId" value="${currentPhaseId}" />
								<input type="hidden" id="popSearchCourseParams" name="popSearchCourseParams" value="" />
								<input type="hidden" id="popSearchCourseUrl" name="popSearchCourseUrl" value="${ctx.host}/project-data/course-add" />
								<a href="" id="popSearchCourse" data-target="#edit" data-toggle="modal">

								</a>
								<c:forEach items="${projectPhases }" var="projectPhase" varStatus="status">
									<input type="hidden" name="phaseId${projectPhase.phase}" id="phaseId${projectPhase.phase}" value="${projectPhase.id}" />
									<div id="tbl-phase-${status.index+1 }" <c:if test='${status.index!=currentPhase-1 }'>style="display:none"</c:if>">
										<div class="form-group ms-form-group">
											<div class=" pull-left breadcrumb">第${status.index+1 }期课程 (
												<fmt:formatDate value="${projectPhase.beginDate}" pattern="yyyy-MM-dd" />~
												<fmt:formatDate value="${projectPhase.endDate}" pattern="yyyy-MM-dd" />)：</div>
											<div class=" pull-right">
												<a href="${ctx.host}/project-data/${projectPhase.id }/phase-date-edit" class="btn btn-shadow-success btn-shadow umu-btn" data-target="#edit" data-toggle="modal">
													<i class="glyphicon glyphicon-plus"></i>&nbsp;&nbsp;设置当期时间
												</a>
												<a href="${ctx.host}/project-data/${projectPhase.id }/course-create" class="btn btn-shadow-success btn-shadow umu-btn" data-target="#edit" data-toggle="modal">
													<i class="glyphicon glyphicon-plus"></i>&nbsp;&nbsp;添加新课程
												</a>
												<a href="${ctx.host}/project-data/${projectPhase.id }/course-search" class="btn btn-shadow-success btn-shadow umu-btn" data-target="#bind-courses" data-toggle="modal">
													<i class="glyphicon glyphicon-plus"></i>&nbsp;&nbsp;查询/添加标准课程
												</a>
											</div>
									</div>
									<table class="table table-hover umu-table tab-pane table-striped">
										<thead>
											<tr>
												<th>课程名称</th>
												<th>课程性质</th>
												<th>讲师姓名</th>
												<th>课程时长</th>
												<th class="text-center">操作</th>
											</tr>
										</thead>

										<tbody>
											<c:forEach items="${projectPhaseCouseMap[projectPhase.id] }" var="projectPhaseCourse" varStatus="cStatus">
												<tr>
													<td>${projectPhaseCourse.course.name}</td>
													<td>${projectPhaseCourse.course.property}</td>
													<td>${projectPhaseCourse.trainer.name}</td>
													<td>${projectPhaseCourse.course.hour}</td>
													<td>
													<c:if test="${projectPhaseCourse.course.property == '自定义课程'}">
													  <a href="${ctx.host}/project-data/${projectPhaseCourse.id }/edit-course" data-target="#edit-course" data-toggle="modal">编辑</a>
													  &nbsp;&nbsp;
													</c:if>
                          <c:if test="${projectPhaseCourse.course.property != '自定义课程'}">
													  <a href="${ctx.host}/project-data/${projectPhaseCourse.id }/bind-trainer" data-target="#bind-trainer" data-toggle="modal">设置讲师</a>
													  &nbsp;&nbsp;
                          </c:if>
													<a href="${ctx.host}/project-data/${projectPhaseCourse.id }/course-delete" data-target="#delete" data-toggle="modal">删除</a>
											  </td>
											</tr>
										</c:forEach>
									</tbody>

								</table>
							</div>
							</c:forEach>
	
							<ul class="nav nav-pills umu-tabs">
								<li class="pull-left active" id="tab-trainee">
									<a href="#">学员</a>
								</li>
							</ul>
						
							<c:if test="${filePath != null}">
								<div class="modal-body">
									<div class="alert alert-danger" role="alert">
  										<a href="${filePath}" download="学员错误信息表.xls" class="alert-link">上传学员有错误信息，请点击链接下载</a>
									</div>
								</div>
							</c:if>
							
							
							<div id="tbl-trainee">

								<div class="pull-right" style="margin-bottom: 24px;">
									<a href="${ctx.host}/project-data/${project.id}/trainee-search" class="btn btn-shadow-success btn-shadow umu-btn" data-target="#create" data-toggle="modal">
										<i class="glyphicon glyphicon-plus"></i>&nbsp;&nbsp;添加必修学员
									</a>

									<input type="hidden" id="popSearchParams" name="popSearchParams" value="" />
									<input type="hidden" id="popSearchUrl" name="popSearchUrl" value="${ctx.host}/project-data/${project.id}/trainee-add" />
									<a href="${ctx.host}/project-data/${project.id}/trainee-upload" class="btn btn-shadow-success btn-shadow umu-btn" data-target="#upload" data-toggle="modal">
										<i class="glyphicon glyphicon-plus"></i>&nbsp;&nbsp;批量导入必修学员
									</a>

									<a href="" id="popSearch" data-target="#edit" data-toggle="modal">
									</a>

								</div>

								<table class="table table-hover umu-table tab-pane table-striped">
									<thead>
										<tr>
											<th>学员编号</th>
											<th>学员姓名</th>
											<th>学员邮箱</th>
                      <th>部门</th>
											<th class="text-center">操作</th>
										</tr>
									</thead>

									<tbody>
										<c:forEach items="${projectTrainees}" var="projectTrainee" varStatus="projectTraineeStatus">
											<tr>
												<td>${projectTrainee.trainee.code}</td>
												<td>${projectTrainee.trainee.name}</td>
												<td>${projectTrainee.trainee.email}</td>
                        <td>${projectTrainee.trainee.departmentFullName}</td>
												<td>
													<a href="${ctx.host}/project-data/${projectTrainee.id }/trainee-delete" data-target="#delete" data-toggle="modal">删除</a>
												</td>
											</tr>
										</c:forEach>
									</tbody>
									<tfoot>
										<tr>
											<td colspan="5" class="no-vertical-padding">
												<div class="pull-left">
													<jsp:include page="/WEB-INF/include/page.jsp">
														<jsp:param name="url" value="${ctx.host}/project-data/${project.id }/detail" />
														<jsp:param name="queryString" value="${queryString}" />
													</jsp:include>
												</div>
											</td>
										</tr>
									</tfoot>
								</table>
							</div>
					
							<div class="ms-operation-group pull-right">
								<a href="${ctx.host}/project-data" data-toggle="" data-target="#search" class="btn btn-shadow-success btn-shadow umu-btn">
									&nbsp;&nbsp;返回
								</a>
							</div>

						</div>
					</div>

				</div>

			</div>

		</div>
		</div>
		<%@ include file="/WEB-INF/include/footer.jsp"%>
		<%@ include file="/WEB-INF/include/script.jsp"%>
		<d:resource root="${ctx.resource}/build" type="script" src="js/page/project/project-data-view.js" />
		<script type="text/javascript">
			require(['page/project/project-data-view'], function(page) {
				page.init();
			})
		</script>

	</body>

</html>